<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="../../zxt/zxt.js"></script>
	
    <script>
    	importZXT("../../zxt");
    </script>
</head>

<body class="bodyBackground">
	
	<div id="Listbox1" zxt="zxt.ui.Listbox" zxt.options="a:1,b:2,c:3,d:4,e:5,f:6,g:7,h:8,i:9,j:10,k:11,l:12,m:13,n:14" }></div>
	<hr>
  	<div id="Listbox2"></div>
	<input id="b" name="a" type="button" value="查看选中值" onClick="var val = inst.getValue();
																	var label = val.join(',');
																	var text=document.getElementById('result');
																	text.value=label;"/>
	<input id="result" name="r" type="text" value=""/><br>
	<input id="b" name="a" type="button" value="新增一行" onClick="	label=labelinput.value;
																	value=valueinput.value;
																	inst.addOption(value,label);
																	inst.render();"/>
	Label<input id="labelinput" type="text"/>
	Value<input id="valueinput" type="text"/>
	<table>
		<tr>
			<td>getType()</td>
			<td>返回按钮的控件类型</td>
			<td><input type="button" name="getType" value="getType" 
				onclick="alert('第一个列表选择控件的type为'+$zxtUI.Listbox1.getType());"/></td>
		</tr>
	</table>
  	<div><a href="../index.html">返回</a></div>
</body>
</html>

<script type="text/javascript">	
	$zxt.init();
	//listbox 构造函数（是否多选，默认值，是否显示value）
	var inst = new zxt.ui.Listbox(false);
	inst.addOption("a",1);
	inst.addOption("b",2);
	inst.addOption("c",3);
	inst.addOption("d",4);
	$("#Listbox2").append(inst.render());	
</script>